<template>
  <div :id="config.id"
       :style="{width:config.width,height:config.height}"></div>
</template>

<script>
import echarts from "echarts"
import echartsTheme from "../../../public/customed"
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          id: "myCharts",
          width: "100%",
          height: "150px"
        }
      }
    },
    options: {
      type: Object,
      default: () => { }
    }
  },
  components: {},
  data() {
    return {
      myCharts: null
    }
  },
  computed: {},
  watch: {
    options: {
      handler() {
        this.initCharts()
      },
      deep: true
    },
  },
  created() { },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initCharts() {
      echarts.registerTheme('echartsTheme', echartsTheme)  //注册主题
      this.myCharts = echarts.init(document.getElementById(this.config.id), "echartsTheme")
      this.myCharts.setOption(this.options)
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      this.$nextTick(() => {
        this.myCharts.resize()
      })
    }
  }
}
</script>

<style  scoped>
</style>